<template>
    <div class="Test">
      <div class="cou">
      <div class="cou-input">
        <input class="cou-input-value" type="text" readonly v-model="value" v-if="open" />
        <input class="cou-input-result" type="text" readonly v-model="result" />
      </div>
      <div class="cou-enter">
        <ul class="cou-enter-num">
          <li
            v-for="(item,index) in numList"
            :key="index"
            @click="enterValue(item)"
          >
            <div v-if="item.num">{{item.num}}</div>
            <div v-else>{{item.symbol}}</div>
          </li>
        </ul>
        <ul class="cou-enter-operate">
          <li @click="delValue()">删除</li>
          <li @click="clearValue()">清零</li>
          <li @click="resultValue()">=</li>
        </ul>
      </div>
    </div>
    </div>
</template>

<script>
export default {
  naem:'Test',
  data() {
    return {
      value: "",
      open:true,
      numList: [
        {
          num: "1",
        },
        {
          num: "2",
        },
        {
          num: "3",
        },
        {
          symbol: "+",
        },
        {
          num: "4",
        },
        {
          num: "5",
        },
        {
          num: "6",
        },
        {
          symbol: "-",
        },
        {
          num: "7",
        },
        {
          num: "8",
        },
        {
          num: "9",
        },
        {
          symbol: "*",
        },
        {
          num: "0",
        },
        {
          num: "00",
        },
        {
          num: ".",
        },
        {
          symbol: "/",
        },
      ],
    };
  },

  computed: {
    //计算数据(值)
    result() {
      this.open=true
      let end = this.value.charAt(this.value.length - 1);
      try {
        if (!isNaN(end)) {
          return eval(this.value);  
          
        }
      } catch (err) {
        this.$message.warning("计算有误，请重新输入");
      }
    },
  },

  methods: {
    enterValue(item) {
      if (item.num) {
        this.value = this.value + item.num;
      } else {
        this.value = this.value + item.symbol;
      }
    },
    //删除
    delValue() {
      this.value = this.value.substr(0, this.value.length - 1);
    },
    //清0
    clearValue() {
      this.value = "";
    },
    //按键结果显示
    resultValue() {
      if (this.result) {
        this.value = this.result.toFixed(2);
        this.open=false
      }
    },
  },
};

</script>

<style lang="less">
li{list-style-type:none;}
.cou {
    width: 289px;
    margin: 0 auto;
  &-input {
    width: 100%;
    height: 80px;
    background: #F1F1F1;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 14px 16px;
    border: none;
    &-value {
      width: 100%;
      background: #F1F1F1;
      text-align: right;
      color: #999999;
      font-size: 16px;
      border: none;
    }

    &-result {
      width: 100%;
      background: #F1F1F1;
      text-align: right;
      font-size: 30px;
      font-family: Impact;
      border: none;
    }
  }

  &-enter {
      margin-top: 14px;

    &-num {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        font-size: 18px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-bottom: 14px;
        cursor: pointer;

        div {
          width: 100%;
          height: 100%;
          border: 1px solid #DCDCDC;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
        }
      }
    }

    &-operate {
      display: flex;
      align-items: center;
      justify-content: space-between;

      li {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      li:nth-child(1) {
        width: 75px;
        height: 42px;
        background: #DADADA;
        border-radius: 30px;
        color: #666666;
        font-size: 14px;
      }

      li:nth-child(2) {
        width: 75px;
        height: 42px;
        background: #FF7575;
        border-radius: 30px;
        color: #FFF;
        font-size: 14px;
      }

      li:nth-child(3) {
        width: 90px;
        height: 42px;
        background: #3891FF;
        border-radius: 30px;
        color: #FFF;
        font-size: 33px;
      }
    }
  }
}

</style>